import React from "react";
import './Piece.css'
import {pieceState} from "../enum/PieceState";

interface type {
    status:pieceState
    onClick?:()=>void
}
const Piece:React.FC<type> = function(props){
    let ball:any = ''
    if(props.status === pieceState.stateRed){
        ball = <div className="stateRed ball"/>
    }else if (props.status === pieceState.stateBlack){
        ball = <div className="stateBlack ball"/>
    }else{
        ball = <div className="air"/>
    }
   return <div className="Piece" onClick={()=>{
       //如果当前棋子没有被 '选中' 并且有回调函数
       if(props.status === pieceState.air && props.onClick){
           props.onClick()
       }
   }
   }>
       {ball}
   </div>
}

export {Piece}
